<template>
  <div>
    <span class="formTitle">
      <i class="vertical-bar"></i>定价子任务页面
    </span>
    <el-form :model="recordForm" ref="subRecordRef" label-width="150px" label-position="right">
      <el-row :gutter="30" type="flex" justify="center">
        <el-col :span="7">
          <el-form-item label="任务名称：" prop="taskName">
            <el-input v-model="recordForm.taskName" maxlength="32" disabled></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="7">
          <el-form-item label="定价编号：" prop="pricingCode">
            <el-input v-model="recordForm.pricingCode" maxlength="32" disabled></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="7">
          <el-form-item label="数据日期：" prop="dataDate">
            <el-input v-model="recordForm.dataDate" maxlength="32" disabled></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row class="container">
        <el-col style="margin-right:10px;" class="content-left">
          <upper-template :searchIcon="false" :configIcon="false">
            <!-- 操作按钮区 -->
            <template slot="buttonArea">
              <el-button @click="refreshGrid()">刷新</el-button>
              <el-button @click="toEngineTask()">引擎任务</el-button>
              <el-button @click="toExcuteRecord()">返回执行记录</el-button>
              <el-button @click="goBack()">返回</el-button>
            </template>
          </upper-template>
        </el-col>
      </el-row>
    </el-form>
    <el-table
      ref="subRecordModelTable"
      :data="subRecordModelData"
      style="width: 100%"
      @row-click="authorizeModelFor"
    >
      <el-table-column width="55" type="selection" ></el-table-column>
      <el-table-column prop="pricingCode" label="定价编号" :show-overflow-tooltip="true"></el-table-column>
      <el-table-column prop="subTaskCode" label="子任务编号" :show-overflow-tooltip="true"></el-table-column>
      <el-table-column prop="dataDate" label="数据日期"
      :formatter="formatterTime"
       :show-overflow-tooltip="true"></el-table-column>
      <el-table-column prop="startTm" label="开始时间" :show-overflow-tooltip="true"></el-table-column>
      <el-table-column prop="endTm" label="结束时间" :show-overflow-tooltip="true"></el-table-column>
      <el-table-column prop="status" label="运行状态" :show-overflow-tooltip="true"></el-table-column>
    </el-table>
    <!-- 分页插件 -->
    <pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="recordForm.page"
      :page-size="recordForm.size"
      @refresh="toSubRecord"
      :total="total"
    ></pagination>

    <!-- 定价执行记录页面 --------------------------- -->
    <el-dialog
      v-dialogDrag
      :title="recordtitleName"
      :visible.sync="recordDi"
      width="80%"
      top="2%"
      :append-to-body="true"
    >
      <positionRecordForm ref="recordForm" :code="code" />
      <div slot="footer">
        <!-- <el-button @click="saveFunc">确 定</el-button> -->
        <el-button @click="recordDi = false">返 回</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import moment from "moment";
import { getDict } from "@/api/getDict";
import { pricingTask } from "@/api/index";
import positionRecordForm from "../pricingTask/pricingTask_record";
export default {
  props: {
    //选中的值
    subRecordFrom: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      //执行记录页面
      recordtitleName: "定价执行记录",
      recordDi: false,
      code: "",
      //定价子任务表单数据
      total: 0,
      subRecordModelData: [],
      //定价子任务界面上方数据
      recordForm: {
        taskName: "",
        pricingCode: "",
        dataDate: "",
        page: 1,
        size: 15
      },
      titleName: "定价子任务",
      subRecord: true
    };
  },
  watch: {
    subRecordFrom: function(newVal, oldVal) {
      if (newVal != oldVal) {
        this.recordForm = newVal;
      } else {
      }
    }
  },
  components: {
    positionRecordForm
  },
  created() {
    this.recordForm.taskName = this.subRecordFrom.taskName;
    this.recordForm.pricingCode = this.subRecordFrom.pricingCode;
    this.recordForm.dataDate =moment( this.subRecordFrom.dataDate).format("YYYY-MM-DD");

    console.log(this.recordForm, "22222222");
    this.searchFunc();
  },
  computed: {},
  mounted() {},
  methods: {
    initSubRecord() {
      this.searchFunc();
    },
    refreshGrid() {
      this.searchFunc();
    },
    handleSizeChange(val) {
      this.recordForm.size = val;
      this.searchFunc();
      console.log(val, "每页数");
    },
    handleCurrentChange(val) {
      this.recordForm.page = val;
      this.searchFunc();
      console.log(val, "当前页");
    },

    goBack() {
      this.$emit("closeExMonitor");
    },

    toExcuteRecord() {
      //返回执行
      this.$emit("toExecuteTask");
    },
    searchFunc() {
      let pagedata = this.recordForm;
      console.log(this.recordForm, "pagedata");
      pricingTask.findAllSubRecord(pagedata).then(res => {
        console.log(res, "跳转子任务的时候chaxundaodeshujv==============");
        if (res.code == 200) {
          this.subRecordModelData = res.datas.rows;
        }
      });
    },
    toSubRecord() {
      let data = { pricingCode: this.recordForm.pricingCode };
      pricingTask.toBlock(data).then(res => {
        console.log(res, "跳转子任务的时候chaxundaodeshujv==============");
        if (res.code == 200) {
          this.recordForm.taskCode = res.data.pricingTask.taskCode;
          this.recordForm.pricingCode = res.data.pricingRecord.pricingCode;
          this.recordForm.dataDate = res.data.pricingRecord.dataDate;
        }
      });
    },
    //点击行选中
    authorizeModelFor(row) {
      if (this.$refs.subRecordModelTable) {
        this.$refs.subRecordModelTable.clearSelection();
      }
      this.$refs.subRecordModelTable.toggleRowSelection(row, true);
    },
    toEngineTask(){
       let selections =  this.$refs.subRecordModelTable.selection;
        if(selections.length !=1){
            return this.$message.warning("请选择一条数据进行操作!");
        }
        this.$emit("toEngineTask",selections[0].pricingCode);
    },
    //事件转换
    formatterTime(row, column) {
      let ele = row[column.property];
      if (ele) return moment(ele).format("YYYY-MM-DD");
      else return "-";
    },
  }
};
</script>
<style lang="scss" scoped>
.el-col-3 {
  width: 40%;
}
.formTitle {
  font-size: 14px;
  font-weight: 700;
  display: block;
  margin-bottom: 10px;
}
</style>
